import echarts from 'echarts'
import '../../../public/static/theme/chalk'

// 初始化图表
export const setEchartOptions = (ref, options) => {
  echarts.init(ref, 'chalk').setOption(options)
}

export const setEcharts = (ref, seriesData = {}) => {
  const series = seriesData || [
    { value: 5, name: '异味分色' },
    { value: 9, name: '园区保洁不干净' },
    { value: 16, name: '杂草未除' },
    { value: 16, name: '违章种植' },
    { value: 16, name: '园区违建' },
    { value: 16, name: '生态破坏' }
  ]
  let total = 0
  series.map((item) => {
    total += item.value
  })
  const colorArr = [
    '#007EFF',
    '#352591',
    '#01afa2',
    '#c89936',
    '#c70f28',
    '#9f40d9'
  ]
  setEchartOptions(ref, {
    color: colorArr, // 环形颜色
    graphic: [
      {
        // 图形中间文字
        type: 'text',
        left: '27%',
        top: '40%',
        style: {
          text: total,
          textAlign: 'center',
          fill: '#fff',
          fontSize: 30
        }
      },
      {
        type: 'text',
        left: '29%',
        top: '55%',
        style: {
          text: '总',
          textAlign: 'center',
          fill: '#999999',
          fontSize: 21,
          fontWeight: 400,
          fontFamily: 'MicrosoftYaHei, MicrosoftYaHei-Regular'
        }
      }
    ],
    // title:{
    //     text:"总",
    //     left:"27.5%",
    //     top:"55%",
    //     textStyle:{
    //         color:"#999999",
    //         fontSize: 21,
    //         fontWeight: 400,
    //         fontFamily: 'MicrosoftYaHei, MicrosoftYaHei-Regular'
    //     }
    // },
    legend: {
      icon: 'circle',
      right: '8%',
      top: '15%',
      orient: 'vertical',
      width: 300,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: '#fff',
        fontWeight: 400,
        fontFamily: 'MicrosoftYaHei, MicrosoftYaHei-Regular',
        fontSize: 14,
        rich: {
          // 启用富文本，下面富文本的定义及属性参数
          words: {
            color: '#cccccc',
            fontWeight: 400,
            fontFamily: 'MicrosoftYaHei, MicrosoftYaHei-Regula',
            fontSize: 14,
            padding: [5, 5]
          },
          percentage: {
            color: '#188bd9',
            fontWeight: 700,
            fontFamily: 'MicrosoftYaHei, MicrosoftYaHei-Bold',
            fontSize: 14
          }
        }
      },
      //  启用富文本返回不一样的样式
      formatter: (arg) => {
        const data = series.filter((item) => item.name === arg)
        return (
          `{words|${data[0].name}}` +
          '   ' +
          `{percentage|${parseInt((data[0].value / total) * 100)}%}`
        )
      }
    },
    series: [
      {
        name: '',
        type: 'pie',
        center: ['30%', '50%'], // 圆中心点的位置
        hoverAnimation: false, // 取消鼠标移入的动画
        radius: ['100', '70'], // 圆环
        label: {
          show: false
        },
        data: series
      }
    ]
  })
}
